import solidLogo from "@/assets/solid.svg";
import Button from "@/components/Button";
import CountDown from "@/components/CountDown";
import Counter from "@/components/Counter";
import HelloWorld from "@/components/HelloWorld";
import Icon from "@/components/Icon";
import Panel from "@/components/Panel";
import ComputedDemo from "@/demo/ComputedDemo";
import InputDemo from "@/demo/InputDemo";
import WatchDemo from "@/demo/WatchDemo";
import viteLogo from "/vite.svg";

export default function DemoView() {
  document.title = "DEMO";
  return (
    <>
      <div class="flex gap-8 p-8">
        <a href="https://vite.dev" target="_blank" rel="noreferrer">
          <img
            src={viteLogo}
            class="h-12 will-change-[filter] transition-[filter] duration-300 hover:drop-shadow hover:drop-shadow-indigo-500"
            alt="Vite logo"
          />
        </a>
        <a href="https://solidjs.com" target="_blank" rel="noreferrer">
          <img
            src={solidLogo}
            class="h-12 will-change-[filter] transition-[filter] duration-300 hover:drop-shadow hover:drop-shadow-cyan-500"
            alt="Solid logo"
          />
        </a>
      </div>
      <HelloWorld />
      <Icon icon="home" style={{ "font-size": "32px" }} />
      <Panel title={<h2>Title</h2>}>
        Body
        <div>Body</div>
      </Panel>
      <Button onClick={() => alert("xx")}>
        <Icon icon="smile" /> Click Me
      </Button>
      <Counter />
      <ComputedDemo />
      <CountDown start={5} onDone={() => console.log("Done")} />
      <InputDemo />
      <WatchDemo />
    </>
  );
}
